<template>
   <div>

      <!-- 查询开始 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
         <!-- 添加 -->
         <el-button type="success" @click="saveUI" size="mini">添加</el-button>
         <el-form-item label="医师名" label-width="300px">
            <el-input v-model="formInline.doctorName" placeholder="医师名"></el-input>
         </el-form-item>
         <el-form-item label="所属科室">
            <el-cascader v-model="formInline.deptId" clearable :options="depts" :props="props" :show-all-levels="false">
            </el-cascader>
         </el-form-item>
         <el-form-item label="值班日期">
            <el-select v-model="formInline.week" clearable placeholder="值班日期">
               <el-option v-for="item in weeks" :key="item.week" :label="item.weekName" :value="item.week">
               </el-option>
            </el-select>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" @click="getList" size="mini">查询</el-button>
         </el-form-item>
      </el-form>
      <!-- 查询结束 -->
      <el-table :data="tableData" style="width: 100%">
         <el-table-column prop="doctor.realName" label="医师姓名" width="180">
         </el-table-column>
         <el-table-column prop="doctor.userPhone" label="医师电话" width="180">
         </el-table-column>
         <el-table-column prop="reservationPrice" label="出诊费" width="180">
         </el-table-column>
         <el-table-column prop="dept.deptName" label="科室" width="180">
         </el-table-column>

         <el-table-column label="值班日期" width="180">
            <template slot-scope="scope">
               {{ scope.row.week == 1 ? "星期一"
                  : scope.row.week == 2 ? "星期二"
                     : scope.row.week == 3 ? "星期三"
                        : scope.row.week == 4 ? "星期四"
                           : scope.row.week == 5 ? "星期五"
                              : scope.row.week == 6 ? "星期六"
                                 : "星期日" }}
            </template>
         </el-table-column>

         <el-table-column label="操作">
            <template slot-scope="scope">
               <el-button type="danger" size="small" @click="del(scope.row)">删除</el-button>
               <el-button type="success" size="small" @click="update(scope.row)">排班</el-button>
            </template>
         </el-table-column>
      </el-table>
      <div class="block">
         <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="total">
         </el-pagination>
      </div>
      <!-- 添加与修改模态框开始 -->
      <el-dialog :title="hint" :visible.sync="dialogFormVisible">
         <el-form :model="form">
            <el-form-item label="科室" label-width="150px" v-if="!form.sortId">
               <el-cascader v-model="form.deptId" :value="form.deptId" :options="depts" :props="props" @change="chooseDeptId"
                  :show-all-levels="false">
               </el-cascader>
            </el-form-item>
            <el-form-item label="医师" label-width="150px" v-if="!form.sortId">
               <el-select v-model="form.doctorId" placeholder="请选择">
                  <el-option v-for="item in selectDoctor" :key="item.userId" :label="item.realName" :value="item.userId">
                  </el-option>
               </el-select>
            </el-form-item>
            <el-form-item label="值班日期" label-width="150px">
               <el-select v-model="form.week" clearable placeholder="值班日期">
                  <el-option v-for="item in weeks" :key="item.week" :label="item.weekName" :value="item.week">
                  </el-option>
               </el-select>
            </el-form-item>
            <el-form-item label="出诊费" label-width="150px">
            <el-input v-model="form.reservationPrice" placeholder="出诊费" type="number"></el-input>
         </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitform">确 定</el-button>
         </div>
      </el-dialog>
      <!-- 添加与修改模态框结束 -->
   </div>
</template>
<script>

import { findAll, del, saveAndUpdate } from "@/api/doctorSort/doctorSort.js";
export default {
   data() {
      return {
         tableData: [],
         currentPage: 1,
         currentSize: 5,
         total: 0,
         dialogFormVisible: false,
         form: {},
         hint: "",
         formInline: {},
         selectDoctor: [],//展示医生，选择医师
         depts: [],//展示医生的部门，
         props: {
            expandTrigger: 'hover',
            value: 'deptId',
            label: 'deptName',
            children: 'children',
            emitPath: false,
         },
         weeks: [
            {
               week: 1,
               weekName: '星期一'
            },
            {
               week: 2,
               weekName: '星期二'
            },
            {
               week: 3,
               weekName: '星期三'
            },
            {
               week: 4,
               weekName: '星期四'
            },
            {
               week: 5,
               weekName: '星期五'
            }, {
               week: 6,
               weekName: '星期六'
            },
            {
               week: 7,
               weekName: '星期日'
            },
         ],
      }
   },
   methods: {
      handleSizeChange(val) {
         this.currentSize = val;
         this.getList();
      },
      handleCurrentChange(val) {
         this.currentPage = val;
         this.getList();
      },
      getList() {
         let data = {
            pageNum: this.currentPage,
            pageSize: this.currentSize,
            week: this.formInline.week,
            doctorName: this.formInline.doctorName,
            deptId: this.formInline.deptId,
         }
         findAll(data).then(res => {
            if (res.code === 200) {
               this.tableData = res.data.pageInfo != null ? res.data.pageInfo.list : [];
               this.total = res.data.pageInfo != null ? res.data.pageInfo.total : 0;
               this.depts = res.data.depts;
            }
         })
      },
      saveUI() {
         this.hint = "添加"
         this.form = {}
         this.dialogFormVisible = true;
      },
      update(row) {
         this.chooseDeptId();
         this.hint = "修改"
         let obj = JSON.stringify(row);
         this.form = JSON.parse(obj);
         this.dialogFormVisible = true;
      },
      submitform() {
         let path = "doctorSort/save";
         this.form.sortId ? path = "doctorSort/update" : path;
         saveAndUpdate(path, this.form).then(res => {
            this.dialogFormVisible = false;
            this.form = {};
            if (res.code == 200) {
               this.$message.success(res.msg);
               this.getList();
               return;
            }
            this.$message(res.msg);
         })
      },
      del(row) {
         this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
         }).then(() => {
            del(row.sortId).then(res => {
               if (res.code == 200) {
                  this.$message.success(res.msg);
                  this.getList();
                  return;
               }
               this.$message.error(res.msg);
            });
         }).catch(() => {
            this.$message({
               type: 'success',
               message: '取消删除'
            });
         });
      },
      chooseDeptId() {
         let doctordept = this.depts;
         this.selectDoctor = [];
         for (let i = 0; i < doctordept.length; i++) {
            if (doctordept[i].deptId == this.form.deptId) {
               console.log(doctordept[i].doctors);
               this.selectDoctor = doctordept[i].doctors;
            }
         }
      },
   },

   mounted() {
      this.getList();
   },

};
</script>
<style lang='' scoped>
</style>